<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>网上购票</title>
<link rel="stylesheet" href="resources/css/frozen.css">
<link rel="stylesheet" href="resources/css/main.css">
<style>
.quntity {
    color: red;
	font-weight: bold;
}
#order-detail-table thead th, #order-detail-table tbody td {
	background-color: #fff;
	line-height: 35px;
}
</style>
<script src="resources/lib/zepto.min.js"></script>
<script src="resources/js/frozen.js"></script>
<script src="resources/js/config.js"></script>
<script src="resources/js/main.js"></script>

</head>
<body ontouchstart="">
	<header class="ui-header ui-header-positive ui-border-b">
		<i class="ui-icon-return" onclick="location='order.html'"></i>
		<h1>订单支付</h1>
	</header>
	<footer class="ui-footer ui-footer-btn">
		<ul id="footer" class="ui-tiled ui-border-t">
			<li data-href="index.html" class="ui-border-r">
				<div>查询购票</div>
			</li>
			<li data-href="order.html" class="ui-border-r">
				<div>订单查询</div>
			</li>
			<li data-href="member.html">
				<div>会员中心</div>
			</li>
		</ul>
	</footer>
	<section class="ui-container">
		<section class="ui-selector">
			<header>
				<h3>订单信息</h3>
			</header>
			<div class="ui-form ui-border-t">
				<form action="#">
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="order-id">订单号</label>
						<input id="order-id" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="operate-time">订购时间</label>
						<input id="operate-time" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="route-name">线路</label>
						<input id="route-name" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="bus-id">车次</label>
						<input id="bus-id" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="bus-date">乘车日期</label>
						<input id="bus-date" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="bus-start-time">发车时间</label>
						<input id="bus-start-time" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="status-name">订单状态</label>
						<input id="status-name" type="text" value="待支付" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="total-quantity">总人数</label>
						<input id="total-quantity" class="quntity" type="text" value="" readonly>
					</div>
					<div class="ui-form-item ui-form-item-show ui-border-b">
						<label for="total-price">总金额</label>
						<input id="total-price" class="quntity" type="text" value="" readonly>
					</div>
				</form>
			</div>
			<section id="order-detail-container" style="display: none;">
				<header>
					<ul class="ui-row-flex">
						<li class="ui-col ui-flex ui-col ui-flex-pack-start">乘车人</li>
					</ul>
				</header>
				<table id="order-detail-table" class="ui-table ui-border-tb">
					<thead>
					</thead>
					<tbody>
					</tbody>
				</table>
			</section>
			<div class="ui-btn-wrap">
				<button id="btn-pay" class="btn-group ui-btn-lg ui-btn-primary">
					支付<span id="left-time"></span>
				</button>
			</div>
			<div class="ui-whitespace">
				<h1 class="ui-txt-warning">温馨提示：</h1>
				<p class="ui-txt-justify">请在订单提交后15分钟内完成支付，否则订单将自动作废。</p>
			</div>
		</section>
	</section>
	
	<div id="loading" class="ui-loading-block hide">
		<div class="ui-loading-cnt">
			<i class="ui-loading-bright"></i>
			<p>努力加载中...</p>
		</div>
	</div>
	
	<div id="success-dialog" class="ui-dialog">
		<div class="ui-dialog-cnt">
			<div class="ui-dialog-bd">
				<div>
				<h4 style="text-align: center; font-weight:bold; margin-bottom:5px;">支付成功</h4>
				<div>您的订单已支付成功，请根据购票成功短信，及时取票乘车。</div></div>
			</div>
			<div class="ui-dialog-ft ui-btn-group">
				<button type="button" data-role="button"  class="select" id="btn-success-dialog-close">关闭</button> 
			</div>
		</div>
	</div> 
</div>
<script>
// 倒计时定时器
var timer;

// 检查登录状态
checkLogin();

(function (){
	/* -------------------- 根据sessionStorage中的值，初始化界面 -------------------- */

	// 根据系统参数，判断是否实名售票
	if(!!appConfig.realNameSell) {
		$("#order-detail-container").show();
	}

	// 查询并加载订单内容
	showLoading("#loading");
	ajax({
		url: appConfig.baseUrl + "/BusTicketInfo.go",
		data: {
			method: "queryPayTime",
			orderid: sessionStorage.payOrderId
		},
		success: function(data) {
			hideLoading("#loading");
			
			if(!!data.rows) {
				if(data.rows.length>0) {
					// 加载订单信息
					var orderInfo = data.rows[0];
					$("#order-id").val(orderInfo.OrderId);
					$("#operate-time").val(orderInfo.OperatorTime);
					$("#route-name").val(orderInfo.SellStationName + ' - ' + orderInfo.EndStationName);
					$("#bus-id").val(orderInfo.BusId);
					$("#bus-date").val(orderInfo.BusTime.substring(0, 10));
					$("#bus-start-time").val(orderInfo.BusTime.substring(11, 16));

					// 定时更新倒计时时间
					var dateStr = orderInfo.OperatorTime.replace(/-/g,"/");
					var date = new Date(dateStr);
					var now = new Date();

					var passTime = now.getTime() - date.getTime();
					if(passTime<=0) {
						passTime = 1000;
					}
					var leftTime= 1000*60*15 - passTime;
					var leftSecond = Math.floor(leftTime/1000);
					timer = setInterval(
						function(){
							ShowCountDown(leftSecond--);
						},
						1000
					); 
					
					// 显示乘车人
					var totalQuantity = 0;
					var totalPrice = 0;
					
					$("#order-detail-table thead").append(
						"<tr><th>姓名</th><th>票价</th><th>座位号</th>" + 
						"<th " + (appConfig.takeChildren ? "" : "style='display: none;'") + ">携童</th>" +
						"</tr>"
					);
					
					for(var i=0; i<data.rows.length; i++) {
						var record = data.rows[i];
						var price = 0;
						if(record.TicketType==1) {
							price = record.FullPrice
						} else if (record.TicketType==2) {
							price = record.HalfPrice
						}
						totalPrice += parseFloat(price);
						totalQuantity += 1;
						
						$("#order-detail-table tbody").append(
							"<tr>" +
								"<td>" + record.LinkmanName + "</td>" +
								"<td>" + price + "</td>" +
								"<td>" + record.SeatNo + "</td>" +
								"<td " + (appConfig.takeChildren ? "" : "style='display: none;'") + ">" + (record.IsChildren=='1' ? '是' : '否') + "</td>" +
							"</tr>"
						);
					}
					
					$("#total-quantity").val(totalQuantity);
					$("#total-price").val(Math.floor(totalPrice*100)/100);
				}
			} else {
				$("#empty-text").html("订单加载失败，请重试");
				$("#empty-text").show();
			}
		}
	});

	// 支付按钮点击事件
	$("#btn-pay").tap(function(){
		if(!!$(this).prop("disabled")) {
			
		} else {
			pay();
		}
	});
	
	// 底部主菜单初始化
	initFooter("#footer");
})();

// 倒计时15分钟
function ShowCountDown(leftSecond) { 
	var minute=Math.floor(leftSecond/60); 
	var second=Math.floor(leftSecond-minute*60); 
	
	if(leftSecond<=0) {
		clearInterval(this);
	}
	
	if(minute>0 || second>0) {
		var minuteText = "";
		if(minute>0) {
			minuteText = minute + "分";
		}
		$("#left-time").html("（剩余" + minuteText + second + "秒）"); 
	} else {
		clearInterval(timer);
		$("#left-time").html("");
		$("#left-time").html("订单超时，请重新下单"); 
		$("#btn-pay").prop("disabled", "disabled");
	}
	
} 

// 支付
function pay() {
	showLoading("#loading");

	if(appConfig.isWeixin) {
		// 微信浏览器，使用微信支付
		ajax({
			url: appConfig.baseUrl + "/wechat",
			data: {
				type: 1,
				orderId: $("#order-id").val()
			},
			success:function(data){
				//跳转到微信支付
				if(data.success=="true"||data.success == true){
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
					   "appId": data.appId,
					   "timeStamp": data.timeStamp,
					   "nonceStr": data.nonceStr,
					   "package": data.packageValue,
					   "signType": data.signType,
					   "paySign": data.paySign
					}, function(res) {
						hideLoading("#loading");
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							showSuccessDialog();
							return;
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							showInfoTip("您取消了支付");
							return;
						} else {
							showInfoTip("支付失败：" + res.err_msg);
							return;
						}
				   });
				}
			},
			failure:function(resp){
				hideLoading("#loading");
				showInfoTip("支付失败");
			}
		});
	} else {
		// 非微信浏览器，使用支付宝支付
		$.ajax({
			url: appConfig.baseUrl + "/BusTicketTrade.go",
			data: {
				method: "alipayTrady",
				orderId: $("#order-id").val()
			},
			type: "GET",
			dataType: "jsonp",
			timeout: 10*1000,
			success: function(data, statusText, xhr){
				hideLoading("#loading");
				if(data.success=="true"||data.success == true){
					location.href = data.wapurl;
					return;               
				} else {
					showInfoTip("支付失败");
					return;
				}
			},
			error: function(xhr, statusText, error){
				hideLoading("#loading");
				showInfoTip("支付失败");
			}
		});
	}
}

// 支付成功弹出框
function showSuccessDialog() {
	var dialog=$("#success-dialog").dialog("show");
	dialog.on("dialog:action",function(e){
		location.href = "order.html";
	});
}
</script>
</body>
</html>